<template>
  <NuxtLayout>
    <div class="page-container mx-auto mt-[120px] overflow-x-hidden text-white md:max-w-6xl">
      <div class="mb-4 overflow-hidden">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item> 标签管理 </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="my-4 flex justify-end">
        <el-button type="primary" @click="onAdd">新增</el-button>
      </div>
      <client-only>
        <el-table :data="tagList">
          <el-table-column label="标签id" prop="tag_id"></el-table-column>
          <el-table-column label="标签名称" prop="name"></el-table-column>
          <el-table-column label="状态">
            <template #default="{ row }">
              <el-switch disabled v-model="row.status" :active-value="1" :inactive-value="0" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button link @click="onRemove(row)">删除</el-button>
              <el-button link @click="onEdit(row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </client-only>

      <div class="pagination-wrap mt-4 flex justify-center">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          @current-change="onCurrentChange"
          @prev-click="onCurrentChange"
          @next-click="onCurrentChange"
        />
      </div>
    </div>
    <addDialog v-if="showDialog" v-model="showDialog" :tagId="tagId"></addDialog>
  </NuxtLayout>
</template>

<script setup lang="ts">
import addDialog from '~/pages-components/tag-management/add-dialog.vue'

interface ITagRow {
  tag_id: number
  name: string
  createTime: string
  updateTime: string
  status: number
}

const tagList = ref([])
const total = ref(0)

const showDialog = ref(false)
const tagId = ref()

const currentPage = ref(1)
const pageSize = ref(20)
const onRemove = (row: ITagRow) => {}
const onEdit = (row: ITagRow) => {
  tagId.value = row.tag_id as number
  showDialog.value = true
}

let { data, err, refresh } = await useFetch('/api/tag', {
  method: 'POST',
  body: {
    currentPage: currentPage.value,
    pageSize: pageSize.value
  }
})

if (data.value) {
  tagList.value = data.value.data.list || []
  total.value = data.value.data.total || 0
}

const onCurrentChange = (value: number) => {
  console.log(value)
}

const onAdd = () => {
  tagId.value = undefined
  showDialog.value = true
}
</script>

<style lang="scss" scoped>
:deep(.pagination-wrap) {
  button {
    background: transparent !important;
    color: #fff !important;
  }

  ul {
    gap: 20px;
  }

  ul > li {
    background: transparent;
    color: #fff !important;
    width: 40px;
    height: 40px;
  }

  .is-active {
    border-radius: 50%;
    background: var(--primary-100-gradient, linear-gradient(81deg, #db519e 13.83%, #b14bf4 49.5%, #666bd1 85.32%));
  }
}
</style>
